<!DOCTYPE html>
<html>
 <head>
    <meta charset='utf-8'>
    <script src='<{$desktop_res_url}>/js/syntaxhighlighter/codemirror.js'></script>
    <script src='<{$desktop_res_url}>/js/syntaxhighlighter/xml.js'></script>
    <script src='<{$desktop_res_url}>/js/syntaxhighlighter/javascript.js'></script>
    <script src='<{$desktop_res_url}>/js/syntaxhighlighter/css.js'></script>
    <script src='<{$desktop_res_url}>/js/syntaxhighlighter/htmlmixed.js'></script>
    <script src='<{$desktop_res_url}>/js/syntaxhighlighter/clike.js'></script>
    <script src='<{$desktop_res_url}>/js/syntaxhighlighter/php.js'></script>
    <style type="text/css" media="screen">
    body {
      font-family: Droid Sans, Arial, sans-serif;
      margin:0;
      padding:0;
     font-size:12px;
    }

    
        .CodeMirror {
          line-height: 1.2em;
          font-family: monospace;
        }

        .CodeMirror-scroll {
          
    
          position:relative;
        }

        .CodeMirror-gutter {
          position: absolute; left: 0; top: 0;
          z-index: 10;
          background-color: #f7f7f7;
          border-right: 1px solid #eee;
          min-width: 2em;
          height: 100%;
        }
        .CodeMirror-gutter-text {
          color: #aaa;
          text-align: right;
          padding: .4em .2em .4em .4em;
        }
        .CodeMirror-lines {
          padding: .4em;
        }

        .CodeMirror pre {
          -moz-border-radius: 0;
          -webkit-border-radius: 0;
          -o-border-radius: 0;
          border-radius: 0;
          border-width: 0; margin: 0; padding: 0; background: transparent;
          font-family: inherit;
          font-size: inherit;
          padding: 0; margin: 0;
          white-space: pre;
          word-wrap: normal;
        }

        .CodeMirror textarea {
          font-family: inherit !important;
          font-size: inherit !important;
        }

        .CodeMirror-cursor {
          z-index: 10;
          position: absolute;
          visibility: hidden;
          border-left: 1px solid black !important;
        }
        .CodeMirror-focused .CodeMirror-cursor {
          visibility: visible;
        }

        span.CodeMirror-selected {
          background: #ccc !important;
          color: HighlightText !important;
        }
        .CodeMirror-focused span.CodeMirror-selected {
          background: Highlight !important;
        }

        .CodeMirror-matchingbracket {color: #0f0 !important;}
        .CodeMirror-nonmatchingbracket {color: #f22 !important;}
        .cm-s-default span.cm-keyword {color: #708;}
        .cm-s-default span.cm-atom {color: #219;}
        .cm-s-default span.cm-number {color: #164;}
        .cm-s-default span.cm-def {color: #00f;}
        .cm-s-default span.cm-variable {color: black;}
        .cm-s-default span.cm-variable-2 {color: #05a;}
        .cm-s-default span.cm-variable-3 {color: #0a5;}
        .cm-s-default span.cm-property {color: black;}
        .cm-s-default span.cm-operator {color: black;}
        .cm-s-default span.cm-comment {color: #999;}
        .cm-s-default span.cm-smarty-comment {color: #888;}
        .cm-s-default span.cm-string {color: #a11;}
        .cm-s-default span.cm-string-2 {color: #f50;}
        .cm-s-default span.cm-meta {color: #555;}
        .cm-s-default span.cm-error {color: #f00;}
        .cm-s-default span.cm-qualifier {color: #555;}
        .cm-s-default span.cm-builtin {color: #30a;}
        .cm-s-default span.cm-bracket {color: #cc7;}
        .cm-s-default span.cm-tag {color: #170;}
        .cm-s-default span.cm-attribute {color: #00c;}
        .cm-s-default span.cm-smarty {color: #0ca;font-weight:bold;}
    </style>
</head>
<body>
<script src='<{$desktop_res_url}>/js/messenger.js'></script>
<script type="text/javascript" charset="utf-8">
    var _id = '<{$id}>';
    var _mode = '<{$mode}>' || "text/html";
        
    var editor = CodeMirror(document.body, {
            value:parent.document.getElementById(_id+"_textarea").value,
            mode: _mode, 
            tabMode: "indent",
            lineNumbers: true,
            indentUnit:4
        }
    );    
       window.getSouceCode = editor.getValue;
</script>
</body>
